<template>
	<view>
	  <el-divider content-position="left">
		<span class="h1" style="font-size: 25px">个人设置</span>
	  </el-divider>
	  <h1>账号信息</h1>
	  <div class="user-card-container">
		<el-card class="user-card">
		  <div class="user-info">
			<h3>个人信息</h3>
			<p>用户名: {{ user.username }}</p>
			<p>昵称: {{ user.name }}</p>
			<p>邮箱: {{ user.email }}</p>
			<p>手机号: {{ user.phone }}</p>
			<p>性别: {{ user.gender == 0 ? "女" : "男" }}</p>
			<p>状态: {{ user.status == 0 ? "删除" : "启用" }}</p>
			<el-button type="primary" @click="edit">编辑</el-button>
		  </div>
		</el-card>
		<!-- 新增/编辑表单 -->
		<el-dialog v-model="dialogVisible" :title="dialogTitle" width="30%">
		  <el-form
			:model="formDTO"
			:rules="rules"
			ref="vForm"
			label-position="right"
			label-width="80px"
			size="medium"
			@submit.prevent
		  >
			<el-form-item label="用户id" prop="userId">
			  <el-input
				v-model="formDTO.userId"
				type="text"
				clearable
				:disabled="true"
			  ></el-input>
			</el-form-item>
			<el-form-item label="用户名" prop="username">
			  <el-input
				v-model="formDTO.username"
				type="text"
				clearable
			  ></el-input>
			</el-form-item>
			<el-form-item label="昵称" prop="name">
			  <el-input v-model="formDTO.name" type="text" clearable></el-input>
			</el-form-item>
			<el-form-item label="邮箱" prop="email">
			  <el-input v-model="formDTO.email" type="text" clearable></el-input>
			</el-form-item>
			<el-form-item label="手机号" prop="phone">
			  <el-input v-model="formDTO.phone" type="text" clearable></el-input>
			</el-form-item>
			<el-form-item label="性别:" prop="gender">
			  <el-select v-model="formDTO.gender" :options="genderOptions" />
			</el-form-item>
			<el-form-item label="状态" prop="status" class="label-right-align">
			  <el-switch
				v-model="formDTO.status"
				:active-value="1"
				:inactive-value="0"
			  ></el-switch>
			</el-form-item>
			<el-form-item>
			  <el-button type="primary" @click="saveUserInfo">提交</el-button>
			  <el-button @click="dialogVisible = false">取消</el-button>
			</el-form-item>
		  </el-form>
		</el-dialog>
	  </div>
	</view>
  </template>
  
  <script>
  import { defineComponent, ref, onMounted } from 'vue';
  import { ElCard, ElButton, ElInput, ElForm, ElFormItem, ElSwitch, ElSelect, ElDialog, ElNotification } from 'element-plus';
  import {admin} from '@/api'; // 保持您的API不变
  
  export default defineComponent({
	components: {
	  ElCard,
	  ElButton,
	  ElInput,
	  ElForm,
	  ElFormItem,
	  ElSwitch,
	  ElSelect,
	  ElDialog,
	  ElNotification,
	},
	setup() {
	  const vForm = ref(null); // 初始化form ref
	  const dialogVisible = ref(false);
	  const dialogTitle = ref('编辑用户信息');
	  const user = ref({});
	  const formDTO = ref({
		userId: '',
		username: '',
		name: '',
		email: '',
		phone: '',
		gender: 1,
		status: 1,
	  });
	  const rules = ref({});
	  const genderOptions = ref([
		{ value: 0, label: '女' },
		{ value: 1, label: '男' },
	  ]);
  
	  const getUserInfo = () => {
		const adminId = sessionStorage.getItem('adminId');
		admin.idQuery(adminId).then((res) => {
			console.log(res.data.data);
		  user.value = res.data.data;
		}).catch(() => {
		  ElNotification.error({
			title: '错误',
			message: '获取用户信息失败',
		  });
		});
	  };
  
	  const edit = () => {
		dialogVisible.value = true;
		if (vForm.value) {
		  vForm.value.resetFields(); // 重置表单字段
		  vForm.value.clearValidate(); // 清除表单验证
		}
		formDTO.value = { ...user.value }; // 深拷贝用户信息
	  };
  
	  const saveUserInfo = () => {
		// 这里添加表单提交逻辑
		// 验证表单
		vForm.value.validate((valid) => {
		  if (valid) {
			// 表单数据验证通过
			console.log('表单数据:', formDTO.value);
			// 这里可以添加提交表单的代码
			admin.update(formDTO.value).then((res) => {
			  console.log(res.data.data);
			  ElNotification.success({
				title: '成功',
				message: '用户信息更新成功',
			  });
			  getUserInfo(); // 更新用户信息
			}).catch(() => {
			  ElNotification.error({
				title: '错误',
				message: '用户信息更新失败',
			  });
			});
		  } else {
			// 表单数据验证失败
			return false;
		  }
		});
		dialogVisible.value = false;
	  };
  
	  onMounted(getUserInfo);
  
	  return {
		vForm,
		dialogVisible,
		dialogTitle,
		user,
		formDTO,
		rules,
		genderOptions,
		edit,
		saveUserInfo,
	  };
	},
  });
  </script>
  
  <style scoped>
.user-card-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh; /* 根据需求调整高度 */
}

.user-card {
  width: 500px; /* 可根据需要调整卡片宽度 */
}

.user-info h3 {
  margin-top: 0;
}

.user-info p {
  margin: 5px 0;
}
</style>